<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getReport, HandleReport} from "@/service/back";
import PageContainer from "@/components/PageContainer.vue";
import {useUserStore} from "@/stores";

const userStore = useUserStore();
const {userInformation} = userStore;
const params = ref({
  pageNum: 1,
  pageSize: 10
})

const reportList = ref({
  total: 0,
  list: [],
})
const getReportList = async () => {
  const res = await getReport(params.value);
  const {data} = res.data;
  reportList.value.total = data.total;
  reportList.value.list = data.list;
}
onMounted(async () => {
  await getReportList();
})
const pageSizeChangeHandle = (val: number) => {
  params.value.pageSize = val;
  params.value.pageNum = 1;
  getReportList();
}
//分页，当前页
const pageCurrentChangeHandle = (val: number) => {
  params.value.pageNum = val;
  getReportList();
}

const handleReport = (reportItem: any, result: number) => {
  reportItem.adminId = userInformation.id;
  reportItem.result = result;
  console.log(reportItem)
  HandleReport(reportItem);
  getReportList();
}

</script>

<template>
  <PageContainer title="用户举报管理">
    <template v-slot:extra>
      <el-input style="width: 300px;white-space: nowrap;" size="large"
                placeholder="请输入要查询的房间号"/>
      <el-button size="large" style="margin-left: 10px;" type="primary">查询</el-button>
      <el-button size="large" style="margin-left: 10px;" type="primary">重置</el-button>
    </template>
    <div style="width: 100%">
      <el-table :data="reportList.list" style="width: 100%">
        <el-table-column label="举报用户" header-align="center" align="center">
          <template #default="scope">
            <span>{{ scope.row.userDTO.nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="举报房间号" header-align="center" align="center">
          <template #default="scope">
            <el-tag>{{ scope.row.roomId }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="举报原因" header-align="center" align="center">
          <template #default="scope">
            <el-tag type="warning">{{ scope.row.reason }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="举报详情" header-align="center" align="center">
          <template #default="scope">
            <span>{{ scope.row.details }}</span>
          </template>
        </el-table-column>
        <el-table-column label="举报处理" header-align="center" align="center">
          <template #default="scope">
            <el-button size="small" @click="handleReport(scope.row,1)">
              已处理
            </el-button>
            <el-button size="small" type="danger" @click="handleReport(scope.row,2)">
              已驳回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination :page-sizes="[10, 15, 20]" layout="total, sizes, prev, pager, next,jumper"
                       :total="reportList.total" v-model:current-page="params.pageNum"
                       v-model:page-size="params.pageSize"
                       @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"/>
      </div>
    </div>

  </PageContainer>
</template>

<style scoped lang="less">
.page {
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto;
  top: 90%
}
</style>